<template>
  <div>
    <!-- 房间类型列表 -->
    <h2>酒店房间类型列表</h2>
    <ul>
      <li v-for="(roomType, index) in roomTypes" :key="index">
        {{ roomType.name }} - 价格: {{ roomType.price }} 元
        <button @click="deleteRoomType(index)">删除</button>
      </li>
    </ul>

    <!-- 添加房间类型表单 -->
    <h2>添加新房间类型</h2>
    <form @submit.prevent="addRoomType">
      <label for="newRoomTypeName">房间类型名称:</label>
      <input type="text" id="newRoomTypeName" v-model="newRoomType.name" required>
      <label for="newRoomTypePrice">房间类型价格:</label>
      <input type="number" id="newRoomTypePrice" v-model="newRoomType.price" required>
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 初始化房间类型列表，每个房间类型包含名称和价格
const roomTypes = ref([
  { name: '标准客房', price: 200 },
  { name: '大床房', price: 250 },
  { name: '豪华大床房', price: 350 },
  { name: '商务大床房', price: 300 },
  { name: '家庭套房', price: 500 }
]);

// 新房间类型对象，包含名称和价格
const newRoomType = ref({
  name: '',
  price: 0
});

// 添加房间类型的方法
const addRoomType = () => {
  if (newRoomType.value.name && newRoomType.value.price > 0) {
    roomTypes.value.push({ ...newRoomType.value });
    newRoomType.value.name = '';
    newRoomType.value.price = 0;
  }
};

// 删除房间类型的方法
const deleteRoomType = (index) => {
  roomTypes.value.splice(index, 1);
};
</script>

<style scoped>
/* 简单的样式 */
h2 {
  margin-top: 20px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

button {
  margin-left: 10px;
}

form label {
  display: block;
  margin-bottom: 5px;
}

form input {
  margin-bottom: 10px;
  width: 200px;
}
</style>